<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { ChannelResData, ChannelItem } from '../types/data'
import { useChannelStore } from '../store/channel'
const store = useChannelStore()

const channels = ref<ChannelItem[]>([])

const getChannels = async () => {
  // 如果我们在get方法中，不指定泛型类型，那么后面res.data得到就是any
  // 如果加了泛型，指定了某个类型，就代表 res.data（响应体） 是 ChannelResData 这个类型
  const res = await axios.get<ChannelResData>(
    'http://geek.itheima.net/v1_0/channels'
  )

  // console.log(res.data.data.channels)
  channels.value = res.data.data.channels
}
getChannels()
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: item.id === store.channelId }"
        href="javascript:;"
        v-for="(item, i) in channels"
        :key="item.id"
        @click="store.changeChannelId(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
